/**
 * vuex初始化基本代码
 */
import Vue from 'vue'
// 1. 导入vuex插件
import Vuex from 'vuex'

// 导入vuex子模块
import user from './modules/user'

// 2. 注册vuex插件
Vue.use(Vuex)

// 3. 导出vuex实例
export default new Vuex.Store({
  // 填空
  // 1. 管理数据=》类似组件中的data属性
  state: {
    // 简单类型
    count: 0,
    name: 'hi vuex!',
    // 引用类型
    obj: {
      a: 1
    }
  },
  getters: {
    // state 获取state中定义的所有数据
    countSub: state => {
      return state.count + 1
    },
    // 获取user模块中age数据
    ageUser: state => state.user.age
  },
  // 2. 存储和修改数据
  mutations: {
    // 修改count值的方法
    /**
     * 注释
     * @param {*} state 获取state中定义的所有数据
     * @param {*} payload 组件传递的参数
     */
    setCount (state, payload) {
      console.log('修改count:', state, payload)
      // 修改数据
      state.count += payload
    }
  },
  // 3. 获取数据=》从后台获取数据
  actions: {
    /**
     *
     * @param {*} context 类似vuex实例
     * @param {*} payload 组件传递的参数
     */
    getCounts ({ commit }, payload) {
      console.log('获取异步数据：', commit, payload)
      // 使用axios调用后台接口api
      setTimeout(() => {
        // 获取到后台数据=》调用mutations方法修改
        commit('setCount', payload)
      }, 3000)
    }
  },
  // 模块化管理vuex中数据和方法
  modules: {
    // 用户模块的vuex数据
    user,
    // 设置模块的vuex数据
    setting: {
      state: {
        title: 'vuex使用'
      }
    }
  }
})
